<template>
    <div class="retention" id="retention" ref="retention-table">
        <a-spin :spinning="search_loading">
            <Table
                row-key="id" 
                ref="table" 
                :columns="columns"
                :width="tableWidth"
                :height="tableHeight" 
                :data="tableVal" 
                :load-data="loadChildrenData"
                style="margin: auto;"
            >
            </Table>
        </a-spin>
    </div>
</template>

<script>
import 'view-design/dist/styles/iview.css';
import { mapActions } from 'vuex';
import elementResize from '@/views/reportForms/show_report/elementResize';
export default {
    data () {
        return {
            tableWidth: 300,
            tableHeight: 300,
            resData: [],
            tableVal: [],
            columns: [],
            timeUnitSign: "天",
            config: null
        }
    },
    props: {
        item: Object,
        dataMapping: Object,
        datasetList: Object,
        itemGridHeight: Number,
        search_loading: Boolean
    },
    watch: {},
    methods: {
        ...mapActions('custom', ['getUpdateReportDs']),
        dataconfig () {
            let datasetId = this.dataMapping.datasetId;
            this.getUpdateReportDs({id: datasetId})
                .then(res => {
                    let time = JSON.parse(res.data.config).time;
                    this.config = JSON.parse(res.data.config).config;
                    this.timeVal(time.unit);
                    this.tableInit();
                })
        },
        timeVal (dateValue) {
            switch (dateValue) {
                case "day":
                    this.timeUnitSign = "天";
                    break;
                case "week":
                    this.timeUnitSign = "周";
                    break;
                case "month":
                    this.timeUnitSign = "月";
                    break;
            }
        },
        tableInit () {
            let current = this.datasetList[this.dataMapping.datasetId];
            let gridHeight = this.item.position.h * this.itemGridHeight,
                gridWidth = this.item.position.w * this.itemGridHeight,
                marginHeight = (this.item.position.h - 1) * 10,
                marginWidth = (this.item.position.w ) * 14;
            this.tableWidth = (gridWidth + marginWidth);
            if (this.item.remark) {
                this.tableHeight = (gridHeight + marginHeight - 70);
            } else {
                this.tableHeight = (gridHeight + marginHeight - 50);
            }
            if (current) {
                this.resData = current;
                this.updateTable();
            }
        },
        loadChildrenData (item,callback) {
            setTimeout(() => {
                let rowId = item.id;
                let children = [];
                let subRowsNum = this.resData.rows[rowId].sub_rows.length;
                for (let j=0;j<subRowsNum;j++){
                    let subrowData = {
                        id:rowId+""+j,
                        by_value: this.resData.rows[rowId].sub_rows[j].by_value,
                        total_people:this.resData.rows[rowId].sub_rows[j].total_people,
                        cellClassName:{}
                    }
                    let subRowCellsNum = this.resData.rows[rowId].sub_rows[j].cells.length;
                    for(let k=0;k<subRowCellsNum;k++){
                        let percent = this.resData.rows[rowId].sub_rows[j].cells[k].percent
                        subrowData["cell"+k] = {
                            p:percent,
                            people:this.resData.rows[rowId].sub_rows[j].cells[k].people,
                        }
                        if (percent>0&&percent<=20){
                            subrowData.cellClassName["cell"+k] = 'cell-ls-20';
                        }else if (percent>20&&percent<=40){
                            subrowData.cellClassName["cell"+k] = 'cell-ls-40';
                        }else if (percent>40&&percent<=60){
                            subrowData.cellClassName["cell"+k] = 'cell-ls-60';
                        }else if (percent>60&&percent<=80){
                            subrowData.cellClassName["cell"+k] = 'cell-ls-80';
                        }else if (percent>80&&percent<=100){
                            subrowData.cellClassName["cell"+k] = 'cell-ls-100';
                        }
                    }
                    children.push(subrowData)
                }

                callback(children);
            }, 1000);
        },
        updateTable () {
            this.columns = [];
            let tableData = [];
            let columnNum = this.resData.rows[0].cells.length;
            if (this.resData.rows[0].by_value === "$ALL"){
                let childrenRows = this.resData.rows.length-1;
                this.columns.push({
                        title:"总体",
                        key:"by_value",
                        tree:true,
                        width: 200
                    },
                    {
                        title:"总人数",
                        key:"total_people",
                        width: 100
                    })
                let totalData = {
                    id:1,
                    by_value:"总体",
                    total_people:this.resData.rows[0].total_people,
                    children:[],
                    cellClassName:{},
                }
                for (let i=0;i<columnNum;i++){
                    let cellHead = {
                        "title":"第"+i+this.timeUnitSign,
                        "key":"cell"+i,
                        "width": 100,
                        "render":function (h,param){

                            let key = param.column.key;
                            let cellData = param.row[key]
                            return h('div', {
                                props: {},
                            },[h('p',cellData.p+"%"),h('p',cellData.people+"人")]);
                        },
                    }
                    this.columns.push(cellHead);
                    let percent = this.resData.rows[0].cells[i].percent;
                    totalData["cell"+i] = {
                        p:percent,
                        people:this.resData.rows[0].cells[i].people,
                    }
                    if (percent>0&&percent<=20){
                        totalData.cellClassName["cell"+i] = 'cell-ls-20';
                    }else if (percent>20&&percent<=40){
                        totalData.cellClassName["cell"+i] = 'cell-ls-40';
                    }else if (percent>40&&percent<=60){
                        totalData.cellClassName["cell"+i] = 'cell-ls-60';
                    }else if (percent>60&&percent<=80){
                        totalData.cellClassName["cell"+i] = 'cell-ls-80';
                    }else if (percent>80&&percent<=100){
                        totalData.cellClassName["cell"+i] = 'cell-ls-100';
                    }
                }

                for (let i=0;i<childrenRows;i++){
                    let childrenData = {
                        id:0+""+i,
                        by_value: this.resData.rows[i+1].by_value,
                        total_people:this.resData.rows[i+1].total_people,
                        cellClassName:{},
                    }
                    let cellsNum = this.resData.rows[i+1].cells.length;
                    for (let j=0;j<cellsNum;j++){
                        let percent = this.resData.rows[i+1].cells[j].percent;
                        childrenData["cell"+j] = {
                            p:percent,
                            people:this.resData.rows[i+1].cells[j].people,
                        }
                        if (percent>0&&percent<=20){
                            childrenData.cellClassName["cell"+j] = 'cell-ls-20';
                        }else if (percent>20&&percent<=40){
                            childrenData.cellClassName["cell"+j] = 'cell-ls-40';
                        }else if (percent>40&&percent<=60){
                            childrenData.cellClassName["cell"+j] = 'cell-ls-60';
                        }else if (percent>60&&percent<=80){
                            childrenData.cellClassName["cell"+j] = 'cell-ls-80';
                        }else if (percent>80&&percent<=100){
                            childrenData.cellClassName["cell"+j] = 'cell-ls-100';
                        }
                    }
                    totalData.children.push(childrenData)
                }
                tableData.push(totalData);
                this.tableVal = tableData;

            }else {
                this.columns.push(
                    {
                        title:this.config.by_field[0],
                        key:"by_value",
                        tree:true,
                        width: 200
                    },
                    {
                        title:"总人数",
                        key:"total_people",
                        width: 100
                    }
                );
                for (let i=0;i<columnNum;i++){
                    let cellHead = {
                        "title":"第"+i+this.timeUnitSign,
                        "key":"cell"+i,
                        "width": 100,
                        "render":function (h,param){
                            let key = param.column.key;
                            let cellData = param.row[key]
                            if (!cellData) {
                                return h(
                                    'div',
                                    {
                                        props: {}
                                    },
                                    [
                                        h('p', ''),
                                        h('p', '')
                                    ]
                                );
                            }
                            return h(
                                'div', 
                                {
                                    props: {},
                                },
                                [
                                    h('p', cellData.p + "%"),
                                    h('p', cellData.people + "人")
                                ]
                            );
                        },
                    }
                    this.columns.push(cellHead)
                }
                let totalData = []
                let rowsNum = this.resData.rows.length;
                for (let i=0;i<rowsNum;i++){
                    let rowData={
                        id:i,
                        by_value:this.resData.rows[i].by_value,
                        total_people:this.resData.rows[i].total_people+"人",
                        children:[],
                        _loading:false,
                        cellClassName:{},
                    }
                    let rowCellsNum = this.resData.rows[i].cells.length;
                    for(let m=0;m<rowCellsNum;m++){
                        let percent = this.resData.rows[i].cells[m].percent
                        rowData["cell"+m] = {
                            p:percent,
                            people:this.resData.rows[i].cells[m].people,
                        }
                        if (percent>0&&percent<=20){
                            rowData.cellClassName["cell"+m] = 'cell-ls-20';
                        }else if (percent>20&&percent<=40){
                            rowData.cellClassName["cell"+m] = 'cell-ls-40';
                        }else if (percent>40&&percent<=60){
                            rowData.cellClassName["cell"+m] = 'cell-ls-60';
                        }else if (percent>60&&percent<=80){
                            rowData.cellClassName["cell"+m] = 'cell-ls-80';
                        }else if (percent>80&&percent<=100){
                            rowData.cellClassName["cell"+m] = 'cell-ls-100';
                        }
                    }
                    totalData.push(rowData);
                }
                this.tableVal = totalData
            }
        }
    },
    created () {
        this.dataconfig();
    },
    mounted () {
        this.tableInit();
        elementResize.on(document.getElementById('retention'), () => {
            let gridHeight = this.item.position.h * this.itemGridHeight,
                gridWidth = this.item.position.w * this.itemGridHeight,
                marginHeight = (this.item.position.h - 1) * 10,
                marginWidth = (this.item.position.w ) * 14;
            this.tableWidth = (gridWidth + marginWidth);
            if (this.item.remark) {
                this.tableHeight = (gridHeight + marginHeight - 70);
            } else {
                this.tableHeight = (gridHeight + marginHeight - 50);
            }
        })
    }
}
</script>

<style scoped>
.retention {
    height: 100%;
    width: 100%;
}
.retention >>> td.table-color1.table-color1 {
    background-color: #6699ff !important;
}
.retention >>> td.table-color2.table-color2 {
    background-color: #66ccff !important;
}
.retention >>> td.table-color3.table-color3 {
    background-color: #66ffff !important;
}
</style>
<style>
.ivu-table .cell-ls-20 {
    background-color: #d0ebff;;
    color: #000;

}
.ivu-table .cell-ls-40 {
    background-color: #add1ed;
    color: #000;

}

.ivu-table .cell-ls-60 {
    background-color: #609ccb;
    color: #000;

}
.ivu-table .cell-ls-80 {
    background-color: #2885cf;
    color: #fff;

}
.ivu-table .cell-ls-100 {
    background-color: #0d60d0;
    color: #fff;
}

.ivu-table th {
    background-color: #fff;
}
</style>